{% extends "base.html" %}

{% block title %}课程内容管理 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .content-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .section {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .form-group {
        margin-bottom: 0;
    }
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #495057;
    }
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .form-control:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .btn-primary {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }
    .btn-secondary {
        background-color: #6c757d;
        color: white;
        border-color: #6c757d;
    }
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }
    .btn-outline-primary {
        color: #007bff;
        border-color: #007bff;
        background-color: white;
    }
    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }
    .btn-outline-secondary {
        color: #6c757d;
        border-color: #6c757d;
        background-color: white;
    }
    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: white;
    }
    .btn-danger {
        background-color: #dc3545;
        color: white;
        border-color: #dc3545;
    }
    .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }
    .btn-outline-danger {
        color: #dc3545;
        border-color: #dc3545;
        background-color: white;
    }
    .btn-outline-danger:hover {
        background-color: #dc3545;
        color: white;
    }
    .btn-success {
        background-color: #28a745;
        color: white;
        border-color: #28a745;
    }
    .btn-success:hover {
        background-color: #1e7e34;
        border-color: #1c7430;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }
    .table th,
    .table td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
        white-space: nowrap;
    }
    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #495057;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .table tr:hover {
        background-color: #f8f9fa;
    }
    .table-container {
        overflow-x: auto;
        margin-bottom: 1.5rem;
    }
    .badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
    }
    .badge-active {
        background-color: #28a745;
        color: white;
    }
    .badge-draft {
        background-color: #ffc107;
        color: white;
    }
    .badge-deleted {
        background-color: #dc3545;
        color: white;
    }
    .chart-container {
        height: 400px;
        margin-bottom: 1.5rem;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .stat-card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 1.5rem;
        text-align: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #007bff;
        margin-bottom: 0.5rem;
    }
    .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
    }
    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }
    .pagination-item {
        margin: 0 0.25rem;
    }
    .pagination-link {
        display: inline-block;
        padding: 0.5rem 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        text-decoration: none;
        color: #007bff;
        transition: all 0.15s ease-in-out;
    }
    .pagination-link:hover {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }
    .pagination-link.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    /* 标签页导航 */
    .tab-container {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 2rem;
    }
    .tabs {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tab {
        margin-bottom: -1px;
    }
    .tab-link {
        display: block;
        padding: 1rem 1.5rem;
        text-decoration: none;
        color: #6c757d;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        transition: all 0.2s;
    }
    .tab-link:hover {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #495057;
    }
    .tab-link.active {
        background-color: white;
        border-color: #dee2e6 #dee2e6 white;
        color: #495057;
        font-weight: 600;
    }
    .tab-content {
        margin-bottom: 2rem;
    }
    .tab-pane {
        display: none;
    }
    .tab-pane.active {
        display: block;
    }
    /* 课程结构树 */
    .course-tree {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1rem;
        height: fit-content;
        max-height: 600px;
        overflow-y: auto;
    }
    .tree-node {
        padding: 0.5rem;
        border-radius: 0.25rem;
        margin-bottom: 0.25rem;
        cursor: pointer;
        transition: background-color 0.2s;
        position: relative;
    }
    .tree-node:hover {
        background-color: #e9ecef;
    }
    .tree-node.active {
        background-color: #007bff;
        color: white;
    }
    .tree-node-content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .tree-expand-btn {
        width: 1rem;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 0.75rem;
    }
    .tree-children {
        margin-left: 1.5rem;
        margin-top: 0.25rem;
    }
    .tree-node-actions {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        transition: opacity 0.2s;
        display: flex;
        gap: 0.25rem;
    }
    .tree-node:hover .tree-node-actions {
        opacity: 1;
    }
    .tree-action-btn {
        background: none;
        border: none;
        padding: 0.25rem;
        cursor: pointer;
        border-radius: 0.125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
    }
    .tree-action-btn:hover {
        background-color: rgba(0,0,0,0.1);
    }
    /* 课程内容编辑区域 */
    .content-editor {
        min-height: 400px;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1rem;
        background-color: white;
    }
    .content-editor-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .editor-tabs {
        display: flex;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 1rem;
    }
    .editor-tab {
        padding: 0.5rem 1rem;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
    }
    .editor-tab:hover {
        background-color: #f8f9fa;
    }
    .editor-tab.active {
        border-bottom-color: #007bff;
        color: #007bff;
        font-weight: 600;
    }
    .editor-content {
        min-height: 300px;
    }
    .editor-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding: 0.5rem;
        background-color: #f8f9fa;
        border-radius: 0.25rem;
    }
    .toolbar-btn {
        background: none;
        border: none;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        border-radius: 0.125rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.875rem;
    }
    .toolbar-btn:hover {
        background-color: #e9ecef;
    }
    /* 文件上传区域 */
    .upload-area {
        border: 2px dashed #dee2e6;
        border-radius: 0.5rem;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.2s;
        margin-bottom: 1rem;
    }
    .upload-area:hover {
        border-color: #007bff;
    }
    .upload-area.active {
        border-color: #28a745;
        background-color: #f8fff8;
    }
    .upload-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    .upload-text {
        color: #6c757d;
    }
    .upload-text strong {
        color: #495057;
    }
    /* 上传文件列表 */
    .file-list {
        max-height: 200px;
        overflow-y: auto;
        margin-bottom: 1rem;
    }
    .file-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border: 1px solid #e9ecef;
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
    }
    .file-icon {
        font-size: 1.5rem;
        color: #007bff;
    }
    .file-info {
        flex: 1;
        min-width: 0;
    }
    .file-name {
        font-weight: 500;
        color: #495057;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .file-size {
        font-size: 0.75rem;
        color: #6c757d;
    }
    .file-actions {
        display: flex;
        gap: 0.25rem;
    }
    .file-action-btn {
        background: none;
        border: none;
        padding: 0.25rem;
        cursor: pointer;
        border-radius: 0.125rem;
        color: #6c757d;
    }
    .file-action-btn:hover {
        color: #007bff;
        background-color: #f8f9fa;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .content-container {
            padding: 0 1rem;
        }
        .section {
            padding: 1.5rem 1rem;
        }
        .section-header {
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }
        .filter-container {
            flex-direction: column;
        }
        .stats-grid {
            grid-template-columns: 1fr;
        }
        .tabs {
            overflow-x: auto;
        }
        .tab-link {
            white-space: nowrap;
        }
        .course-tree {
            max-height: 300px;
            margin-bottom: 1.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-book-open mr-2 text-primary"></i>课程内容管理
    </h1>
    <p class="text-gray-600">管理课程章节、课件、作业和测验等教学内容</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="content-container">
    <!-- 标签页导航 -->
    <div class="tab-container">
        <ul class="tabs">
            <li class="tab"><a href="#course-structure" class="tab-link active" data-toggle="tab">课程结构</a></li>
            <li class="tab"><a href="#course-materials" class="tab-link" data-toggle="tab">课程资料</a></li>
            <li class="tab"><a href="#assignments" class="tab-link" data-toggle="tab">作业管理</a></li>
            <li class="tab"><a href="#quizzes" class="tab-link" data-toggle="tab">测验管理</a></li>
            <li class="tab"><a href="#discussions" class="tab-link" data-toggle="tab">讨论区</a></li>
        </ul>
    </div>
    
    <!-- 标签页内容 -->
    <div class="tab-content">
        <!-- 课程结构标签页 -->
        <div id="course-structure" class="tab-pane active">
            <div class="row">
                <!-- 课程选择 -->
                <div class="col-lg-12 mb-4">
                    <div class="form-group" style="max-width: 500px;">
                        <label for="course-select" class="form-label">选择课程</label>
                        <select id="course-select" class="form-control">
                            <option value="CS301">人工智能导论 - 计算机科学与技术2021级1班</option>
                            <option value="CS301-2">人工智能导论 - 计算机科学与技术2021级3班</option>
                            <option value="CS402">机器学习 - 计算机科学与技术2021级2班</option>
                            <option value="CS202">数据结构 - 计算机科学与技术2022级1班</option>
                            <option value="CS204">计算机网络 - 计算机科学与技术2022级2班</option>
                        </select>
                    </div>
                </div>
                
                <!-- 左侧课程结构树 -->
                <div class="col-lg-4 mb-4">
                    <div class="section" style="height: 100%;">
                        <div class="section-header">
                            <h2 class="section-title">
                                <i class="fa fa-sitemap text-primary"></i>
                                课程章节结构
                            </h2>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-primary" id="add-chapter-btn">
                                    <i class="fa fa-plus mr-1"></i>添加章节
                                </button>
                                <button class="btn btn-sm btn-outline-primary" id="add-section-btn">
                                    <i class="fa fa-plus mr-1"></i>添加小节
                                </button>
                            </div>
                        </div>
                        <div class="course-tree" id="course-tree">
                            <div class="tree-node active" data-id="chapter-1">
                                <div class="tree-node-content">
                                    <span class="tree-expand-btn">▼</span>
                                    <i class="fa fa-folder"></i>
                                    <span>第1章 人工智能概述</span>
                                </div>
                                <div class="tree-children">
                                    <div class="tree-node" data-id="section-1-1">
                                        <div class="tree-node-content">
                                            <span class="tree-expand-btn" style="visibility: hidden;">►</span>
                                            <i class="fa fa-file-alt"></i>
                                            <span>1.1 人工智能的定义与发展</span>
                                        </div>
                                        <div class="tree-node-actions">
                                            <button class="tree-action-btn" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="tree-action-btn" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="tree-node" data-id="section-1-2">
                                        <div class="tree-node-content">
                                            <span class="tree-expand-btn" style="visibility: hidden;">►</span>
                                            <i class="fa fa-file-alt"></i>
                                            <span>1.2 人工智能的主要研究领域</span>
                                        </div>
                                        <div class="tree-node-actions">
                                            <button class="tree-action-btn" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="tree-action-btn" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="tree-node" data-id="section-1-3">
                                        <div class="tree-node-content">
                                            <span class="tree-expand-btn" style="visibility: hidden;">►</span>
                                            <i class="fa fa-file-alt"></i>
                                            <span>1.3 人工智能的应用与影响</span>
                                        </div>
                                        <div class="tree-node-actions">
                                            <button class="tree-action-btn" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="tree-action-btn" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="tree-node-actions">
                                    <button class="tree-action-btn" title="编辑">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="tree-action-btn" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="tree-node" data-id="chapter-2">
                                <div class="tree-node-content">
                                    <span class="tree-expand-btn">▼</span>
                                    <i class="fa fa-folder"></i>
                                    <span>第2章 知识表示与推理</span>
                                </div>
                                <div class="tree-children">
                                    <div class="tree-node" data-id="section-2-1">
                                        <div class="tree-node-content">
                                            <span class="tree-expand-btn" style="visibility: hidden;">►</span>
                                            <i class="fa fa-file-alt"></i>
                                            <span>2.1 知识表示的基本方法</span>
                                        </div>
                                        <div class="tree-node-actions">
                                            <button class="tree-action-btn" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="tree-action-btn" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="tree-node" data-id="section-2-2">
                                        <div class="tree-node-content">
                                            <span class="tree-expand-btn" style="visibility: hidden;">►</span>
                                            <i class="fa fa-file-alt"></i>
                                            <span>2.2 确定性推理方法</span>
                                        </div>
                                        <div class="tree-node-actions">
                                            <button class="tree-action-btn" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="tree-action-btn" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="tree-node-actions">
                                    <button class="tree-action-btn" title="编辑">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="tree-action-btn" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="tree-node" data-id="chapter-3">
                                <div class="tree-node-content">
                                    <span class="tree-expand-btn">►</span>
                                    <i class="fa fa-folder"></i>
                                    <span>第3章 搜索策略</span>
                                </div>
                                <div class="tree-node-actions">
                                    <button class="tree-action-btn" title="编辑">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="tree-action-btn" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="tree-node" data-id="chapter-4">
                                <div class="tree-node-content">
                                    <span class="tree-expand-btn">►</span>
                                    <i class="fa fa-folder"></i>
                                    <span>第4章 机器学习基础</span>
                                </div>
                                <div class="tree-node-actions">
                                    <button class="tree-action-btn" title="编辑">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="tree-action-btn" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧内容编辑区域 -->
                <div class="col-lg-8">
                    <div class="section">
                        <div class="section-header">
                            <h2 class="section-title">
                                <i class="fa fa-edit text-primary"></i>
                                <span id="current-content-title">内容编辑</span>
                            </h2>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-secondary" id="save-content-btn">
                                    <i class="fa fa-save mr-1"></i>保存
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" id="preview-content-btn">
                                    <i class="fa fa-eye mr-1"></i>预览
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" id="publish-content-btn">
                                    <i class="fa fa-check mr-1"></i>发布
                                </button>
                            </div>
                        </div>
                        
                        <div class="editor-tabs">
                            <div class="editor-tab active" data-editor-tab="content">内容</div>
                            <div class="editor-tab" data-editor-tab="files">文件</div>
                            <div class="editor-tab" data-editor-tab="settings">设置</div>
                        </div>
                        
                        <!-- 内容编辑区域 -->
                        <div class="editor-content">
                            <div id="editor-tab-content" class="editor-tab-content">
                                <div class="editor-toolbar">
                                    <button class="toolbar-btn" title="标题 1"><i class="fa fa-heading"></i> H1</button>
                                    <button class="toolbar-btn" title="标题 2"><i class="fa fa-heading"></i> H2</button>
                                    <button class="toolbar-btn" title="标题 3"><i class="fa fa-heading"></i> H3</button>
                                    <div class="border-r border-gray-300 mx-1"></div>
                                    <button class="toolbar-btn" title="加粗"><i class="fa fa-bold"></i></button>
                                    <button class="toolbar-btn" title="斜体"><i class="fa fa-italic"></i></button>
                                    <button class="toolbar-btn" title="下划线"><i class="fa fa-underline"></i></button>
                                    <button class="toolbar-btn" title="删除线"><i class="fa fa-strikethrough"></i></button>
                                    <div class="border-r border-gray-300 mx-1"></div>
                                    <button class="toolbar-btn" title="有序列表"><i class="fa fa-list-ol"></i></button>
                                    <button class="toolbar-btn" title="无序列表"><i class="fa fa-list-ul"></i></button>
                                    <button class="toolbar-btn" title="引用"><i class="fa fa-quote-right"></i></button>
                                    <button class="toolbar-btn" title="代码块"><i class="fa fa-code"></i></button>
                                    <div class="border-r border-gray-300 mx-1"></div>
                                    <button class="toolbar-btn" title="插入链接"><i class="fa fa-link"></i></button>
                                    <button class="toolbar-btn" title="插入图片"><i class="fa fa-image"></i></button>
                                    <button class="toolbar-btn" title="插入表格"><i class="fa fa-table"></i></button>
                                    <button class="toolbar-btn" title="插入视频"><i class="fa fa-video"></i></button>
                                </div>
                                
                                <div class="form-group mb-4">
                                    <label for="content-title-input" class="form-label">标题</label>
                                    <input type="text" id="content-title-input" class="form-control" value="人工智能的定义与发展">
                                </div>
                                
                                <div class="form-group mb-4">
                                    <label for="content-description" class="form-label">简介</label>
                                    <textarea id="content-description" class="form-control" rows="3">本节介绍人工智能的基本定义、历史发展和主要里程碑。</textarea>
                                </div>
                                
                                <div class="form-group">
                                    <label for="content-body" class="form-label">正文内容</label>
                                    <textarea id="content-body" class="form-control" rows="15">
<h2>人工智能的定义</h2>

人工智能（Artificial Intelligence，简称AI）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。

<h2>人工智能的发展历程</h2>

人工智能的发展大致可以分为以下几个阶段：

<ol>
<li><strong>起步发展期（1956-1974年）</strong>：人工智能概念首次提出，主要研究下棋程序和定理证明。</li>
<li><strong>反思发展期（1974-1980年）</strong>：人工智能遇到技术瓶颈，开始反思和调整研究方向。</li>
<li><strong>应用发展期（1980-1987年）</strong>：专家系统兴起，人工智能开始走向实际应用。</li>
<li><strong>低迷发展期（1987-1993年）</strong>：专家系统遇到问题，人工智能进入低谷期。</li>
<li><strong>稳步发展期（1993-2011年）</strong>：机器学习和数据挖掘技术逐渐成熟，人工智能应用范围扩大。</li>
<li><strong>快速发展期（2011年至今）</strong>：深度学习技术取得突破性进展，人工智能进入快速发展阶段。</li>
</ol>

<h2>人工智能的主要里程碑</h2>

<table>
<thead>
<tr>
<th>年份</th>
<th>事件</th>
<th>意义</th>
</tr>
</thead>
<tbody>
<tr>
<td>1956年</td>
<td>达特茅斯会议</td>
<td>首次提出人工智能概念</td>
</tr>
<tr>
<td>1957年</td>
<td>感知器算法</td>
<td>首个神经网络模型</td>
</tr>
<tr>
<td>1965年</td>
<td>模糊逻辑理论</td>
<td>为不确定推理奠定基础</td>
</tr>
<tr>
<td>1980年</td>
<td>专家系统</td>
<td>人工智能商业化的开始</td>
</tr>
<tr>
<td>1997年</td>
<td>深蓝战胜卡斯帕罗夫</td>
<td>AI在国际象棋领域超越人类</td>
</tr>
<tr>
<td>2016年</td>
<td>AlphaGo战胜李世石</td>
<td>AI在围棋领域超越人类</td>
</tr>
<tr>
<td>2017年</td>
<td>Transformer模型</td>
<td>自然语言处理的重大突破</td>
</tr>
</tbody>
</table>
                                    </textarea>
                                </div>
                            </div>
                            
                            <!-- 文件管理区域 -->
                            <div id="editor-tab-files" class="editor-tab-content" style="display: none;">
                                <div class="form-group mb-4">
                                    <label class="form-label">上传文件</label>
                                    <div class="upload-area" id="upload-area">
                                        <div class="upload-icon">
                                            <i class="fa fa-cloud-upload-alt"></i>
                                        </div>
                                        <div class="upload-text">
                                            <p>拖拽文件到此处或 <strong>点击上传</strong></p>
                                            <p class="text-sm">支持的文件格式：PDF, Word, Excel, PowerPoint, JPG, PNG, MP4, MP3 等</p>
                                            <p class="text-sm">单个文件最大500MB</p>
                                        </div>
                                        <input type="file" id="file-upload" multiple style="display: none;">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">已上传文件</label>
                                    <div class="file-list">
                                        <div class="file-item">
                                            <div class="file-icon">
                                                <i class="fa fa-file-pdf"></i>
                                            </div>
                                            <div class="file-info">
                                                <div class="file-name">人工智能发展简史.pdf</div>
                                                <div class="file-size">2.5 MB</div>
                                            </div>
                                            <div class="file-actions">
                                                <button class="file-action-btn" title="预览">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="file-action-btn" title="下载">
                                                    <i class="fa fa-download"></i>
                                                </button>
                                                <button class="file-action-btn" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="file-item">
                                            <div class="file-icon">
                                                <i class="fa fa-file-powerpoint"></i>
                                            </div>
                                            <div class="file-info">
                                                <div class="file-name">人工智能概述.pptx</div>
                                                <div class="file-size">4.8 MB</div>
                                            </div>
                                            <div class="file-actions">
                                                <button class="file-action-btn" title="预览">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="file-action-btn" title="下载">
                                                    <i class="fa fa-download"></i>
                                                </button>
                                                <button class="file-action-btn" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="file-item">
                                            <div class="file-icon">
                                                <i class="fa fa-file-image"></i>
                                            </div>
                                            <div class="file-info">
                                                <div class="file-name">AI发展时间线.png</div>
                                                <div class="file-size">1.2 MB</div>
                                            </div>
                                            <div class="file-actions">
                                                <button class="file-action-btn" title="预览">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="file-action-btn" title="下载">
                                                    <i class="fa fa-download"></i>
                                                </button>
                                                <button class="file-action-btn" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 设置区域 -->
                            <div id="editor-tab-settings" class="editor-tab-content" style="display: none;">
                                <div class="form-group mb-4">
                                    <label for="content-type" class="form-label">内容类型</label>
                                    <select id="content-type" class="form-control">
                                        <option value="text" selected>文本内容</option>
                                        <option value="video">视频课程</option>
                                        <option value="quiz">测验</option>
                                        <option value="assignment">作业</option>
                                        <option value="discussion">讨论</option>
                                    </select>
                                </div>
                                
                                <div class="form-group mb-4">
                                    <label for="content-status" class="form-label">内容状态</label>
                                    <select id="content-status" class="form-control">
                                        <option value="draft">草稿</option>
                                        <option value="published" selected>已发布</option>
                                    </select>
                                </div>
                                
                                <div class="form-group mb-4">
                                    <label class="form-label">
                                        <input type="checkbox" id="require-login" checked> 需要登录才能访问
                                    </label>
                                </div>
                                
                                <div class="form-group mb-4">
                                    <label class="form-label">
                                        <input type="checkbox" id="allow-download"> 允许下载附件
                                    </label>
                                </div>
                                
                                <div class="form-group mb-4">
                                    <label for="access-control" class="form-label">访问控制</label>
                                    <select id="access-control" class="form-control">
                                        <option value="all" selected>所有学生</option>
                                        <option value="specific">特定学生</option>
                                        <option value="password">密码保护</option>
                                    </select>
                                </div>
                                
                                <div class="form-group mb-4">
                                    <label for="publish-date" class="form-label">发布日期</label>
                                    <input type="datetime-local" id="publish-date" class="form-control" value="2024-09-01T08:00">
                                </div>
                                
                                <div class="form-group">
                                    <label for="expiry-date" class="form-label">截止日期（可选）</label>
                                    <input type="datetime-local" id="expiry-date" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 课程资料标签页 -->
        <div id="course-materials" class="tab-pane">
            <!-- 筛选条件 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-filter text-primary"></i>
                        筛选条件
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="material-name-filter" class="form-label">资料名称</label>
                        <input type="text" id="material-name-filter" class="form-control" placeholder="输入资料名称">
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="material-type-filter" class="form-label">资料类型</label>
                        <select id="material-type-filter" class="form-control">
                            <option value="all">全部类型</option>
                            <option value="document">文档</option>
                            <option value="presentation">演示文稿</option>
                            <option value="image">图片</option>
                            <option value="video">视频</option>
                            <option value="audio">音频</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="material-status-filter" class="form-label">状态</label>
                        <select id="material-status-filter" class="form-control">
                            <option value="all">全部状态</option>
                            <option value="published">已发布</option>
                            <option value="draft">草稿</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100">查询</button>
                    </div>
                </div>
            </div>
            
            <!-- 资料列表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-list text-primary"></i>
                        课程资料列表
                    </h2>
                    <div class="btn-group">
                        <button class="btn btn-outline-primary" id="upload-material-btn">
                            <i class="fa fa-upload mr-1"></i>上传资料
                        </button>
                        <button class="btn btn-outline-secondary" id="export-materials-btn">
                            <i class="fa fa-download mr-1"></i>导出列表
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>序号</th>
                                <th>资料名称</th>
                                <th>类型</th>
                                <th>大小</th>
                                <th>所属章节</th>
                                <th>上传时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>人工智能发展简史.pdf</td>
                                <td>文档</td>
                                <td>2.5 MB</td>
                                <td>第1章 人工智能概述</td>
                                <td>2024-09-01 08:30</td>
                                <td><span class="badge badge-active">已发布</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">预览</button>
                                    <button class="btn btn-sm btn-outline-secondary">编辑</button>
                                    <button class="btn btn-sm btn-outline-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>2</td>
                                <td>人工智能概述.pptx</td>
                                <td>演示文稿</td>
                                <td>4.8 MB</td>
                                <td>第1章 人工智能概述</td>
                                <td>2024-09-01 08:35</td>
                                <td><span class="badge badge-active">已发布</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">预览</button>
                                    <button class="btn btn-sm btn-outline-secondary">编辑</button>
                                    <button class="btn btn-sm btn-outline-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>3</td>
                                <td>AI发展时间线.png</td>
                                <td>图片</td>
                                <td>1.2 MB</td>
                                <td>第1章 人工智能概述</td>
                                <td>2024-09-01 08:40</td>
                                <td><span class="badge badge-active">已发布</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">预览</button>
                                    <button class="btn btn-sm btn-outline-secondary">编辑</button>
                                    <button class="btn btn-sm btn-outline-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>4</td>
                                <td>知识表示方法.docx</td>
                                <td>文档</td>
                                <td>3.2 MB</td>
                                <td>第2章 知识表示与推理</td>
                                <td>2024-09-05 10:15</td>
                                <td><span class="badge badge-active">已发布</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">预览</button>
                                    <button class="btn btn-sm btn-outline-secondary">编辑</button>
                                    <button class="btn btn-sm btn-outline-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>5</td>
                                <td>知识图谱示例.xlsx</td>
                                <td>文档</td>
                                <td>1.8 MB</td>
                                <td>第2章 知识表示与推理</td>
                                <td>2024-09-05 10:20</td>
                                <td><span class="badge badge-draft">草稿</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">预览</button>
                                    <button class="btn btn-sm btn-outline-secondary">编辑</button>
                                    <button class="btn btn-sm btn-outline-danger">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页控制 -->
                <div class="pagination">
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&laquo;</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link active">1</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">2</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">3</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&raquo;</a>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 作业管理标签页 -->
        <div id="assignments" class="tab-pane">
            <!-- 筛选条件 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-filter text-primary"></i>
                        筛选条件
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="assignment-name-filter" class="form-label">作业名称</label>
                        <input type="text" id="assignment-name-filter" class="form-control" placeholder="输入作业名称">
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="assignment-status-filter" class="form-label">状态</label>
                        <select id="assignment-status-filter" class="form-control">
                            <option value="all">全部状态</option>
                            <option value="published">已发布</option>
                            <option value="draft">草稿</option>
                            <option value="ended">已结束</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100">查询</button>
                    </div>
                </div>
            </div>
            
            <!-- 作业列表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-list text-primary"></i>
                        作业列表
                    </h2>
                    <div class="btn-group">
                        <button class="btn btn-outline-primary" id="create-assignment-btn">
                            <i class="fa fa-plus mr-1"></i>创建作业
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>作业名称</th>
                                <th>所属章节</th>
                                <th>发布时间</th>
                                <th>截止时间</th>
                                <th>已提交</th>
                                <th>已批改</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>人工智能定义与发展思考</td>
                                <td>第1章 人工智能概述</td>
                                <td>2024-09-01 09:00</td>
                                <td>2024-09-08 23:59</td>
                                <td>42/45</td>
                                <td>15/45</td>
                                <td><span class="badge badge-active">进行中</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">重新开启</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页控制 -->
                <div class="pagination">
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&laquo;</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link active">1</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&raquo;</a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 标签页切换功能
        const tabLinks = document.querySelectorAll('.tab-link');
        tabLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有活动标签
                document.querySelectorAll('.tab-link').forEach(l => l.classList.remove('active'));
                document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
                
                // 添加当前活动标签
                this.classList.add('active');
                const targetId = this.getAttribute('href').substring(1);
                document.getElementById(targetId).classList.add('active');
            });
        });
        
        // 编辑器标签页切换
        const editorTabs = document.querySelectorAll('.editor-tab');
        editorTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                const tabId = this.getAttribute('data-editor-tab');
                
                // 移除所有活动标签
                document.querySelectorAll('.editor-tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.editor-tab-content').forEach(c => c.style.display = 'none');
                
                // 添加当前活动标签
                this.classList.add('active');
                document.getElementById(`editor-tab-${tabId}`).style.display = 'block';
            });
        });
        
        // 课程结构树节点点击事件
        const treeNodes = document.querySelectorAll('.tree-node');
        treeNodes.forEach(node => {
            node.addEventListener('click', function(e) {
                // 如果点击的是操作按钮，不执行节点选择
                if (e.target.closest('.tree-node-actions')) {
                    return;
                }
                
                // 移除所有活动节点
                document.querySelectorAll('.tree-node').forEach(n => n.classList.remove('active'));
                
                // 添加当前活动节点
                this.classList.add('active');
                
                // 更新当前编辑内容的标题
                const titleElement = this.querySelector('.tree-node-content span:last-child');
                if (titleElement) {
                    document.getElementById('current-content-title').textContent = `编辑：${titleElement.textContent}`;
                }
            });
        });
        
        // 课程结构树展开/收起功能
        const expandBtns = document.querySelectorAll('.tree-expand-btn');
        expandBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const treeNode = this.closest('.tree-node');
                const children = treeNode.querySelector('.tree-children');
                
                if (children) {
                    if (children.style.display === 'none') {
                        children.style.display = 'block';
                        this.textContent = '▼';
                    } else {
                        children.style.display = 'none';
                        this.textContent = '►';
                    }
                }
            });
        });
        
        // 文件上传区域点击事件
        const uploadArea = document.getElementById('upload-area');
        const fileUpload = document.getElementById('file-upload');
        
        uploadArea.addEventListener('click', function() {
            fileUpload.click();
        });
        
        // 文件上传区域拖拽功能
        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('active');
        });
        
        uploadArea.addEventListener('dragleave', function() {
            this.classList.remove('active');
        });
        
        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('active');
            
            if (e.dataTransfer.files.length) {
                // 这里可以处理拖拽上传的文件
                console.log('Files dropped:', e.dataTransfer.files);
                // 实际项目中这里会有文件上传的逻辑
                alert(`已接收到 ${e.dataTransfer.files.length} 个文件，实际项目中会进行上传处理`);
            }
        });
        
        // 文件选择事件
        fileUpload.addEventListener('change', function() {
            if (this.files.length) {
                console.log('Files selected:', this.files);
                // 实际项目中这里会有文件上传的逻辑
                alert(`已选择 ${this.files.length} 个文件，实际项目中会进行上传处理`);
            }
        });
        
        // 保存内容按钮事件
        document.getElementById('save-content-btn').addEventListener('click', function() {
            // 实际项目中这里会有保存内容的逻辑
            alert('内容已保存！实际项目中会将内容保存到服务器');
        });
        
        // 预览内容按钮事件
        document.getElementById('preview-content-btn').addEventListener('click', function() {
            // 实际项目中这里会有预览内容的逻辑
            alert('即将打开预览窗口！实际项目中会在新窗口或模态框中显示预览');
        });
        
        // 发布内容按钮事件
        document.getElementById('publish-content-btn').addEventListener('click', function() {
            // 实际项目中这里会有发布内容的逻辑
            alert('内容已发布！实际项目中会将内容状态修改为已发布');
        });
        
        // 添加章节按钮事件
        document.getElementById('add-chapter-btn').addEventListener('click', function() {
            // 实际项目中这里会有添加章节的逻辑
            const chapterTitle = prompt('请输入章节标题：');
            if (chapterTitle) {
                alert(`即将添加新章节：${chapterTitle}！实际项目中会在服务器创建新章节`);
            }
        });
        
        // 添加小节按钮事件
        document.getElementById('add-section-btn').addEventListener('click', function() {
            // 实际项目中这里会有添加小节的逻辑
            const activeChapter = document.querySelector('.tree-node.active');
            if (!activeChapter) {
                alert('请先选择一个章节作为父节点！');
                return;
            }
            
            const sectionTitle = prompt('请输入小节标题：');
            if (sectionTitle) {
                alert(`即将在选中章节下添加新小节：${sectionTitle}！实际项目中会在服务器创建新小节`);
            }
        });
        
        // 上传资料按钮事件
        document.getElementById('upload-material-btn').addEventListener('click', function() {
            // 实际项目中这里会有打开上传资料模态框的逻辑
            alert('即将打开上传资料窗口！实际项目中会打开上传资料的模态框');
        });
        
        // 导出列表按钮事件
        document.getElementById('export-materials-btn').addEventListener('click', function() {
            // 实际项目中这里会有导出列表的逻辑
            alert('即将导出资料列表！实际项目中会生成并下载列表的Excel文件');
        });
        
        // 创建作业按钮事件
        document.getElementById('create-assignment-btn').addEventListener('click', function() {
            // 实际项目中这里会有创建作业的逻辑
            alert('即将打开创建作业窗口！实际项目中会打开创建作业的模态框');
        });
        
        // 创建测验按钮事件
        document.getElementById('create-quiz-btn').addEventListener('click', function() {
            // 实际项目中这里会有创建测验的逻辑
            alert('即将打开创建测验窗口！实际项目中会打开创建测验的模态框');
        });
        
        // 创建讨论按钮事件
        document.getElementById('create-discussion-btn').addEventListener('click', function() {
            // 实际项目中这里会有创建讨论的逻辑
            alert('即将打开创建讨论窗口！实际项目中会打开创建讨论的模态框');
        });
        
        // 表格中的操作按钮事件委托
        const tables = document.querySelectorAll('.table');
        tables.forEach(table => {
            table.addEventListener('click', function(e) {
                const btn = e.target.closest('button');
                if (!btn) return;
                
                const btnText = btn.textContent.trim();
                const row = btn.closest('tr');
                const itemName = row.querySelector('td:nth-child(3)')?.textContent || '项目';
                
                if (btnText.includes('预览')) {
                    alert(`即将预览${itemName}！实际项目中会在新窗口或模态框中显示预览`);
                } else if (btnText.includes('编辑')) {
                    alert(`即将编辑${itemName}！实际项目中会打开编辑的模态框`);
                } else if (btnText.includes('删除')) {
                    if (confirm(`确定要删除${itemName}吗？`)) {
                        alert(`${itemName}已删除！实际项目中会在服务器删除该项目`);
                    }
                } else if (btnText.includes('查看详情')) {
                    alert(`即将查看${itemName}详情！实际项目中会跳转到详情页面`);
                } else if (btnText.includes('批改作业')) {
                    alert(`即将进入${itemName}批改页面！实际项目中会跳转到批改作业页面`);
                } else if (btnText.includes('成绩统计')) {
                    alert(`即将查看${itemName}成绩统计！实际项目中会在新窗口或模态框中显示统计结果`);
                } else if (btnText.includes('查看答案')) {
                    alert(`即将查看${itemName}答案！实际项目中会在新窗口或模态框中显示答案`);
                } else if (btnText.includes('发布')) {
                    if (confirm(`确定要发布${itemName}吗？`)) {
                        alert(`${itemName}已发布！实际项目中会在服务器修改该项目状态为已发布`);
                    }
                } else if (btnText.includes('关闭')) {
                    if (confirm(`确定要关闭${itemName}吗？`)) {
                        alert(`${itemName}已关闭！实际项目中会在服务器修改该项目状态为已关闭`);
                    }
                } else if (btnText.includes('重新开启')) {
                    if (confirm(`确定要重新开启${itemName}吗？`)) {
                        alert(`${itemName}已重新开启！实际项目中会在服务器修改该项目状态为活跃`);
                    }
                }
            });
        });
        
        // 课程选择变更事件
        document.getElementById('course-select').addEventListener('change', function() {
            // 实际项目中这里会有切换课程的逻辑
            alert(`已切换到课程：${this.options[this.selectedIndex].text}！实际项目中会加载该课程的结构和内容`);
        });
        
        // 文件列表中的操作按钮事件委托
        const fileLists = document.querySelectorAll('.file-list');
        fileLists.forEach(fileList => {
            fileList.addEventListener('click', function(e) {
                const btn = e.target.closest('.file-action-btn');
                if (!btn) return;
                
                const fileItem = btn.closest('.file-item');
                const fileName = fileItem.querySelector('.file-name').textContent;
                
                if (btn.querySelector('.fa-eye')) {
                    alert(`即将预览文件：${fileName}！实际项目中会在新窗口或模态框中显示文件预览`);
                } else if (btn.querySelector('.fa-download')) {
                    alert(`即将下载文件：${fileName}！实际项目中会触发文件下载`);
                } else if (btn.querySelector('.fa-trash')) {
                    if (confirm(`确定要删除文件：${fileName}吗？`)) {
                        alert(`文件：${fileName}已删除！实际项目中会在服务器删除该文件`);
                    }
                }
            });
        });
        
        // 表格中的复选框全选功能
        const tableCheckboxes = document.querySelectorAll('.table input[type="checkbox"]:first-child');
        tableCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const table = this.closest('table');
                const checkboxes = table.querySelectorAll('tbody input[type="checkbox"]');
                checkboxes.forEach(cb => {
                    cb.checked = this.checked;
                });
            });
        });
        
        // 分页链接点击事件
        const paginationLinks = document.querySelectorAll('.pagination-link:not(.active)');
        paginationLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 实际项目中这里会有分页加载数据的逻辑
                const pageText = this.textContent.trim();
                let pageNum = 1;
                
                if (pageText === '1' || pageText === '2' || pageText === '3') {
                    pageNum = parseInt(pageText);
                } else if (pageText === '»') {
                    pageNum = 2; // 假设是下一页
                } else if (pageText === '«') {
                    pageNum = 1; // 假设是上一页
                }
                
                alert(`即将跳转到第${pageNum}页！实际项目中会加载该页的数据`);
            });
        });
        
        // 内容编辑器工具栏按钮事件
        const toolbarButtons = document.querySelectorAll('.toolbar-btn');
        toolbarButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 实际项目中这里会有编辑器工具栏按钮的功能实现
                const toolName = this.getAttribute('title');
                alert(`已点击${toolName}工具！实际项目中会在编辑器中执行相应操作`);
            });
        });
        
        // 响应式调整
        function adjustForResponsive() {
            const isMobile = window.innerWidth < 768;
            const tables = document.querySelectorAll('.table');
            
            tables.forEach(table => {
                if (isMobile) {
                    // 实际项目中这里会有移动端表格的特殊处理逻辑
                    // 例如将表格转换为卡片式布局等
                }
            });
        }
        
        // 初始调整和窗口大小改变时调整
        adjustForResponsive();
        window.addEventListener('resize', adjustForResponsive);
        
        // 页面载入动画效果
        const fadeElements = document.querySelectorAll('.section');
        fadeElements.forEach((element, index) => {
            setTimeout(() => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                
                setTimeout(() => {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, 10);
            }, index * 100);
        });
    });
</script>
{% endblock %}详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">批改作业</button>
                                    <button class="btn btn-sm btn-outline-secondary">成绩统计</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>知识表示方法研究</td>
                                <td>第2章 知识表示与推理</td>
                                <td>2024-09-10 10:00</td>
                                <td>2024-09-17 23:59</td>
                                <td>0/45</td>
                                <td>0/45</td>
                                <td><span class="badge badge-active">进行中</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">批改作业</button>
                                    <button class="btn btn-sm btn-outline-secondary">成绩统计</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>搜索算法实现</td>
                                <td>第3章 搜索策略</td>
                                <td>-</td>
                                <td>-</td>
                                <td>0/45</td>
                                <td>0/45</td>
                                <td><span class="badge badge-draft">草稿</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">编辑</button>
                                    <button class="btn btn-sm btn-outline-secondary">发布</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页控制 -->
                <div class="pagination">
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&laquo;</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link active">1</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&raquo;</a>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 测验管理标签页 -->
        <div id="quizzes" class="tab-pane">
            <!-- 筛选条件 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-filter text-primary"></i>
                        筛选条件
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="quiz-name-filter" class="form-label">测验名称</label>
                        <input type="text" id="quiz-name-filter" class="form-control" placeholder="输入测验名称">
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="quiz-status-filter" class="form-label">状态</label>
                        <select id="quiz-status-filter" class="form-control">
                            <option value="all">全部状态</option>
                            <option value="published">已发布</option>
                            <option value="draft">草稿</option>
                            <option value="ended">已结束</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100">查询</button>
                    </div>
                </div>
            </div>
            
            <!-- 测验列表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-list text-primary"></i>
                        测验列表
                    </h2>
                    <div class="btn-group">
                        <button class="btn btn-outline-primary" id="create-quiz-btn">
                            <i class="fa fa-plus mr-1"></i>创建测验
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>测验名称</th>
                                <th>所属章节</th>
                                <th>题目数量</th>
                                <th>总分</th>
                                <th>发布时间</th>
                                <th>截止时间</th>
                                <th>已完成</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>人工智能概述测验</td>
                                <td>第1章 人工智能概述</td>
                                <td>10</td>
                                <td>100</td>
                                <td>2024-09-05 09:00</td>
                                <td>2024-09-07 23:59</td>
                                <td>45/45</td>
                                <td><span class="badge badge-ended">已结束</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">成绩统计</button>
                                    <button class="btn btn-sm btn-outline-secondary">查看答案</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>知识表示与推理测验</td>
                                <td>第2章 知识表示与推理</td>
                                <td>10</td>
                                <td>100</td>
                                <td>2024-09-15 10:00</td>
                                <td>2024-09-17 23:59</td>
                                <td>12/45</td>
                                <td><span class="badge badge-active">进行中</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">成绩统计</button>
                                    <button class="btn btn-sm btn-outline-secondary">查看答案</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>搜索策略测验</td>
                                <td>第3章 搜索策略</td>
                                <td>10</td>
                                <td>100</td>
                                <td>-</td>
                                <td>-</td>
                                <td>0/45</td>
                                <td><span class="badge badge-draft">草稿</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">编辑</button>
                                    <button class="btn btn-sm btn-outline-secondary">发布</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页控制 -->
                <div class="pagination">
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&laquo;</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link active">1</a>
                    </span>
                    <span class="pagination-item">
                        <a href="#" class="pagination-link">&raquo;</a>
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 讨论区标签页 -->
        <div id="discussions" class="tab-pane">
            <!-- 筛选条件 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-filter text-primary"></i>
                        筛选条件
                    </h2>
                </div>
                <div class="filter-container">
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="discussion-name-filter" class="form-label">讨论主题</label>
                        <input type="text" id="discussion-name-filter" class="form-control" placeholder="输入讨论主题">
                    </div>
                    <div class="form-group" style="flex: 1; min-width: 200px;">
                        <label for="discussion-status-filter" class="form-label">状态</label>
                        <select id="discussion-status-filter" class="form-control">
                            <option value="all">全部状态</option>
                            <option value="active">活跃</option>
                            <option value="closed">已关闭</option>
                        </select>
                    </div>
                    <div class="form-group" style="align-self: flex-end;">
                        <button class="btn btn-primary w-100">查询</button>
                    </div>
                </div>
            </div>
            
            <!-- 讨论列表 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-list text-primary"></i>
                        讨论主题列表
                    </h2>
                    <div class="btn-group">
                        <button class="btn btn-outline-primary" id="create-discussion-btn">
                            <i class="fa fa-plus mr-1"></i>创建讨论
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>讨论主题</th>
                                <th>所属章节</th>
                                <th>发起人</th>
                                <th>回复数</th>
                                <th>浏览量</th>
                                <th>创建时间</th>
                                <th>最后回复</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>如何理解人工智能的定义？</td>
                                <td>第1章 人工智能概述</td>
                                <td>张老师</td>
                                <td>32</td>
                                <td>125</td>
                                <td>2024-09-01 14:30</td>
                                <td>李同学 10分钟前</td>
                                <td><span class="badge badge-active">活跃</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">关闭</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>知识表示方法的优缺点讨论</td>
                                <td>第2章 知识表示与推理</td>
                                <td>张老师</td>
                                <td>25</td>
                                <td>98</td>
                                <td>2024-09-10 10:15</td>
                                <td>王同学 2小时前</td>
                                <td><span class="badge badge-active">活跃</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看详情</button>
                                    <button class="btn btn-sm btn-outline-secondary">关闭</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>人工智能伦理问题探讨</td>
                                <td>第1章 人工智能概述</td>
                                <td>张老师</td>
                                <td>48</td>
                                <td>165</td>
                                <td>2024-08-28 16:45</td>
                                <td>张老师 3天前</td>
                                <td><span class="badge badge-ended">已关闭</span></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary">查看